import React from "react";
import "./Treechart.css";
import { Modal } from "antd";
import { OrganizationGraph } from "@ant-design/charts";

const data = {
  id: "joel",
  value: {
    text: "李伟峰",
    value: "陈兰兰",
    // 建议使用 bae64 数据
    icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
    style: {
      fill: "#00CED1",
      width: "200",
    },
<<<<<<< HEAD
=======
    img:"/api/img/%E8%80%81%E4%BA%BA.jpeg",
  },
  style: {
    width: 110,
    height:40,
    // stroke: "#87ceeb",
    fill: "	#FFC0CB",
    radius: "8",
    // textAlign: "center",
>>>>>>> ed678a7000a1d68c204bc8b113edb1947d2ed868
  },
  children: [
    {
      id: "c1",
<<<<<<< HEAD
      value: {
        text: "李伟峰",
        value: "陈兰兰",
        // 建议使用 bae64 数据
        icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
=======
      label: "中年夫妇1",
      leftIcon: {
        style: {
          fill: "#40E0D0",
          // stroke: "#87ceeb",
          radius: "2",
        },
        img: "/api/img/%E4%B8%AD%E5%B9%B4%E5%A4%AB%E5%A6%871.jpeg",
      },
      style: {
        width: 110,
        // stroke: "#87ceeb",
        fill: "#40E0D0",
        radius: "8",
        
        hover: { stroke: "#87ceeb", lineWidth: 4 },
>>>>>>> ed678a7000a1d68c204bc8b113edb1947d2ed868
      },
      children: [
        {
          id: "c1-1",
          value: {
            text: "李伟峰",
            value: "陈兰兰",
            // 建议使用 bae64 数据
            icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
          },
        },
        {
          id: "c1-2",
          value: {
            text: "李伟峰",
            value: "陈兰兰",
            // 建议使用 bae64 数据
            icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
          },
          children: [
            {
              id: "c1-2-1",
              value: {
                text: "李伟峰",
                value: "陈兰兰",
                // 建议使用 bae64 数据
                icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
              },
            },
            {
              id: "c1-2-2",
              value: {
                text: "李伟峰",
                value: "陈兰兰",
                // 建议使用 bae64 数据
                icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
              },
            },
          ],
        },
      ],
    },
    {
      id: "c2",
<<<<<<< HEAD
      value: {
        text: "李伟峰",
        value: "陈兰兰",
        // 建议使用 bae64 数据
        icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
=======
      label: "中年夫妇2",
      leftIcon: {
        style: {
          fill: "	#87CEEB",
          // stroke: "#87ceeb",
          radius: "2",
        },
        img:"/api/img/%E4%B8%AD%E5%B9%B4%E5%A4%AB%E5%A6%872.jpeg",
      },
      style: {
        width: 110,
        // stroke: "#87ceeb",
        fill: "#87CEEB",
        radius: "8",
        textAlign: "center",
>>>>>>> ed678a7000a1d68c204bc8b113edb1947d2ed868
      },
    },
    {
      id: "c3",
<<<<<<< HEAD
      value: {
        text: "李伟峰",
        value: "陈兰兰",
        // 建议使用 bae64 数据
        icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
=======
      label: "中年夫妇3",
      leftIcon: {
        style: {
          fill: "	#48D1CC",
          // stroke: "#87ceeb",
          radius: "2",
        },
        img:"/api/img/%E4%B8%AD%E5%B9%B4%E5%A4%AB%E5%A6%873.jpeg",
      },
      style: {
        width: 110,
        // stroke: "#87ceeb",
        fill: "#48D1CC",
        radius: "8",
        textAlign: "center",
>>>>>>> ed678a7000a1d68c204bc8b113edb1947d2ed868
      },
      children: [
        {
          id: "c3-1",
          value: {
            text: "李伟峰",
            value: "陈兰兰",
            // 建议使用 bae64 数据
            icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
          },
        },
        {
          id: "c3-2",
          value: {
            text: "李伟峰",
            value: "陈兰兰",
            // 建议使用 bae64 数据
            icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
          },
          children: [
            {
              id: "c3-2-1",
              value: {
                text: "李伟峰",
                value: "陈兰兰",
                // 建议使用 bae64 数据
                icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
              },
            },
            {
              id: "c3-2-2",
              value: {
                text: "李伟峰",
                value: "陈兰兰",
                // 建议使用 bae64 数据
                icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
              },
            },
            {
              id: "c3-2-3",
              value: {
                text: "李伟峰",
                value: "陈兰兰",
                // 建议使用 bae64 数据
                icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
              },
            },
          ],
        },
        {
          id: "c3-3",
          value: {
            text: "李伟峰",
            value: "陈兰兰",
            // 建议使用 bae64 数据
            icon: "https://avatars.githubusercontent.com/u/31396322?v=4",
          },
        },
      ],
    },
  ],
};

const colorArr = ["#00CED1", "#FFA07A", "#87CEFA", "#BA55D3", "#00FA9A"];

export default function TreeChart() {
  /**
   * 遍历树的方法
   */
  //   const traverseTree = (data, fn) => {
  //     if (typeof fn !== "function") {
  //       return;
  //     }

  //     if (fn(data) === false) {
  //       return false;
  //     }

  //     if (data && data.children) {
  //       for (let i = data.children.length - 1; i >= 0; i--) {
  //         if (!traverseTree(data.children[i], fn)) return false;
  //       }
  //     }
  //     return true;
  //   };

  //   traverseTree(data, (d) => {
  //     d.leftIcon = {
  //       style: {
  //         fill: "#e6fffb",
  //         stroke: "#e6fffb",
  //       },
  //       img:
  //         "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ",
  //     };
  //     d.rightIcon = {
  //         style: {
  //           fill: "#e6fffb",
  //           stroke: "#e6fffb",
  //         },
  //         img:
  //           "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ",
  //       };
  //     return true;
  //   });

  const randomNum = (minNum, maxNum) => {
    switch (arguments.length) {
      case 1:
        return parseInt(Math.random() * minNum + 1, 10);
        break;
      case 2:
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
        break;
      default:
        return 0;
        break;
    }
  };

  return (
    <div className="content">
      <OrganizationGraph
        width={1000}
        height={1000}
        data={data}
<<<<<<< HEAD
        nodeCfg={{
          // type:'circle',
          padding: 0,
          size: [150, 40],
          style: (node) => {
            const num = randomNum(0, 4);

            return {
              fill: colorArr[num],
              // stroke: "#999999",
            };
          },
          label: {
            style: (node, group, type) => {
              const styles = {
                icon: {
                  width: 40,
                  height: 40,
                  x: 0,
                  y: 0,
                },
                value: {
                  fill: "#fff",
                  x: 100,
                  // y: 4,
                },
                text: {
                  fill: "#fff",
                  x: 100,
                  y: 4,
                },
              };
              return styles[type];
            },
          },
        }}
=======
        nodeType="icon-node"
        width={500}
        height={500}
        // enableEdit={true}
        collapseExpand={false}
        handleNodeClick={handleNodeClick}
        handleNodeHover={handleNodeHover}
        // edgeStyle={{fill: "#FFFFFF", }}
        nodeStyle={{hover: { stroke: "#87ceeb", lineWidth: 9 },}}
        // minimapCfg={{ show: true }}
>>>>>>> ed678a7000a1d68c204bc8b113edb1947d2ed868
      />
    </div>
  );
}
